<template>
  <div id="app" class="app">
    <div class="container">
      <nav class="sidebar">
        <ul class="nav-links">
          <!-- 原始 -->
          <!-- <li><a href="#" class="active" data-content="home">首页</a></li> -->
          <!-- <li><a href="#" data-content="about">关于我们</a></li> -->
          <li>
            <router-link to="/home" active-class="active">首页</router-link>
          </li>
          <li>
            <router-link :to="{ name: 'guanyu' }" active-class="active"
              >关于我们</router-link
            >
          </li>
        </ul>
      </nav>

      <main class="content">
        <Banner />
        <div id="content-display"><router-view></router-view></div>
      </main>
    </div>
  </div>
</template>

<script>
import Banner from "./components/Banner.vue";
export default {
  name: "App",

  components: { Banner },

  methods: {},
};
</script>

<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  line-height: 1.6;
  color: #333;
  background-color: #f5f7fa;
}

.container {
  display: flex;
  min-height: 100vh;
}

.sidebar {
  width: 200px;
  background-color: #2c3e50;
  padding: 20px 0;
  box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
}

.nav-links {
  list-style: none;
}

.nav-links a {
  display: block;
  padding: 15px 20px;
  color: #ecf0f1;
  text-decoration: none;
  transition: all 0.3s ease;
  border-left: 3px solid transparent;
}

.nav-links a:hover {
  background-color: #34495e;
  border-left: 3px solid #3498db;
  padding-left: 25px;
}

.nav-links a.active {
  background-color: #34495e;
  border-left: 3px solid #3498db;
}

.content {
  flex: 1;
  padding: 30px;
  background-color: white;
  box-shadow: -2px 0 5px rgba(0, 0, 0, 0.05);
}

.content h1 {
  color: #2c3e50;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
}

.content p {
  margin-bottom: 15px;
}

@media (max-width: 768px) {
  .container {
    flex-direction: column;
  }

  .sidebar {
    width: 100%;
    padding: 10px 0;
  }

  .nav-links {
    display: flex;
  }

  .nav-links a {
    flex: 1;
    text-align: center;
    border-left: none;
    border-bottom: 3px solid transparent;
  }

  .nav-links a:hover {
    border-left: none;
    border-bottom: 3px solid #3498db;
    padding-left: 20px;
  }

  .nav-links a.active {
    border-left: none;
    border-bottom: 3px solid #3498db;
  }
}
</style>

